<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css" rel="stylesheet">

    <title>The plasma is an ordinary lieutenant commander.</title>
</head>
<body class="container mx-auto p-4">
<h1>Hunger</h1>
<p>Hercle, finis rusticus!, guttus!</p>
<div class="cal" id="app">
    @{{ message }}

    <div v-if="schedules.length===0">
        <div>#</div>
        <div class="cal-title bg-gray-200 border-b-2 border-t-2 border-gray-600 flex flex-row flex-no-wrap">
            <div
                class="w-24 flex-shrink-0 h-8 border-r-2 border-gray-600 border-l-0 first: border-l-2 m-0 text-center leading-8">
                #
            </div>
            <div class="w-8 h-8 flex-1 border-r-2 border-gray-600 border-l-0 m-0 text-center leading-8"
                 v-for="k in days">@{{ k }}
            </div>
        </div>
        <div class="bg-gray-200 border-b-2 border-gray-600 flex flex-row flex-no-wrap">
            <div
                class="w-24 h-8 flex-shrink-0 border-r-2 border-gray-600 border-l-0 first: border-l-2 m-0 text-center leading-8">
            </div>
            <div class="w-8 h-8 flex-1 border-r-2 border-gray-600 border-l-0 m-0 text-center leading-8"
                 v-for="j in days">
            </div>
        </div>
    </div>
    <div v-else v-for="(schedule, index) in schedules">
        @{{ index+1 }}
        <div class="cal-title bg-gray-200 border-b-2 border-t-2 border-gray-600 flex flex-row flex-no-wrap">
            <div
                class="w-24 flex-shrink-0 h-8 border-r-2 border-gray-600 border-l-0 first: border-l-2 m-0 text-center leading-8">
                #
            </div>
            <div class="w-8 h-8 flex-1 border-r-2 border-gray-600 border-l-0 m-0 text-center leading-8"
                 v-for="k in days">@{{ k }}
            </div>
        </div>
        <div v-if="schedules[index].length===0">
            <div class="bg-gray-200 border-b-2 border-gray-600 flex flex-row flex-no-wrap">
                <div
                    class="w-24 h-8 flex-shrink-0 border-r-2 border-gray-600 border-l-0 first: border-l-2 m-0 text-center leading-8">
                    @{{ getYearMonth(begin(index),0) }}
                </div>
                <div class="w-8 h-8 flex-1 border-r-2 border-gray-600 border-l-0 m-0 text-center leading-8"
                     v-for="j in days">
                </div>
            </div>
        </div>
        <div v-else>
            <div class="bg-gray-200 border-b-2 border-gray-600 flex flex-row flex-no-wrap"
                 v-for="i in diffMonth(index)">
                <div
                    class="w-24 h-8 flex-shrink-0 border-r-2 border-gray-600 border-l-0 first: border-l-2 m-0 text-center leading-8">
                    @{{ getYearMonth(begin(index),i-1) }}
                </div>

                <div class="w-8 h-8 flex-1 border-r-2 border-gray-600 border-l-0 m-0 text-center leading-8"
                     v-for="j in days">
                    <input type="text" v-model="cals[index][addMonthDay(begin(index),i-1,j)]"
                           class="w-8 h-8 text-center" :disabled="isValidDate(addMonthDay(begin(index),i-1,j))">
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.28.0/moment.min.js"
        integrity="sha512-Q1f3TS3vSt1jQ8AwP2OuenztnLU6LwxgyyYOG1jgMW/cbEMHps/3wjvnl1P3WTrF3chJUWEoxDUEjMxDV8pujg=="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.28.0/locale/zh-cn.min.js"
        integrity="sha512-hhN0oY+2bIYwHjUlfqbsp4BQpxJtNvrjo3apNVHjlP7gXgN+MiQWaJwL3G0w5Ax0dsxXz6MGEdjWzosWnq2MmA=="
        crossorigin="anonymous"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            contract:{
                contract_no: '',
                advertiser_no: '',
                business_area: '',
                payment_period: '',
                payment_method: '',
                agency_fee: '',
                pay_date: '',
                less: '',
                advertiser_id: '',
                advertiser: '',
                advertiser_type: '',
                address: '',
                zip_code: '',
                contact_name: '',
                telephone: '',
                email: '',
                fax: '',
                bank: '',
                bank_name: '',
                bank_no: '',
                discount: '',
                vip_discount: '',
                remark: '',
                user_id: '',
                user: '',
                department_id: '',
                department: '',
                describe: '',
                end: '',
                end_reason: '',
                currency: '',
                value: '',
                discount_value: '',
                master: '',
                direct_advertiser: '',
                new_advertiser: '',
                third_department: '',
                pre_verify: '',
                verify: '',
                advertisement:[
                    {
                        advertisement_no:'',
                        content:'',
                        duration:'',
                        word_piece:'',
                        advertisement_slot:'',
                        belt:'',
                        begin_time:'',
                        end_time:'',
                        amount:'',
                        make_fee:'',
                        add_fee:'',
                        advertising_fee:'',
                        order:'',
                        form:'',
                        channel:'',
                        advertisement_slot_desc:'',
                        break:'',
                        break_amount:'',
                        break_date:'',
                        break_fee:'',
                        break_user:'',
                        break_time:'',
                        back:'',
                        back_advertisement_no:'',
                        back_amount:'',
                        sort:'',
                        back_user:'',
                        back_time:'',
                        price:'',
                        schedules: [
                            {
                                advertising_date: '2020-01-09',
                                amount: 5,
                                sp:'',
                            },
                            {
                                advertising_date: '2020-10-09',
                                amount: 2,
                                sp:'',
                            },
                        ]
                    },
                    {
                        advertisement_no:'',
                        content:'',
                        duration:'',
                        word_piece:'',
                        advertisement_slot:'',
                        belt:'',
                        begin_time:'',
                        end_time:'',
                        amount:'',
                        make_fee:'',
                        add_fee:'',
                        advertising_fee:'',
                        order:'',
                        form:'',
                        channel:'',
                        advertisement_slot_desc:'',
                        break:'',
                        break_amount:'',
                        break_date:'',
                        break_fee:'',
                        break_user:'',
                        break_time:'',
                        back:'',
                        back_advertisement_no:'',
                        back_amount:'',
                        sort:'',
                        back_user:'',
                        back_time:'',
                        price:'',
                        schedules: [

                        ]
                    },
                    {
                        advertisement_no:'',
                        content:'',
                        duration:'',
                        word_piece:'',
                        advertisement_slot:'',
                        belt:'',
                        begin_time:'',
                        end_time:'',
                        amount:'',
                        make_fee:'',
                        add_fee:'',
                        advertising_fee:'',
                        order:'',
                        form:'',
                        channel:'',
                        advertisement_slot_desc:'',
                        break:'',
                        break_amount:'',
                        break_date:'',
                        break_fee:'',
                        break_user:'',
                        break_time:'',
                        back:'',
                        back_advertisement_no:'',
                        back_amount:'',
                        sort:'',
                        back_user:'',
                        back_time:'',
                        price:'',
                        schedules: [
                            {
                                advertising_date: '2020-01-09',
                                amount: 5,
                                sp:'',
                            },
                            {
                                advertising_date: '2020-10-09',
                                amount: 2,
                                sp:'',
                            },
                        ]
                    },
                ],
            },
            schedules: [[
                {
                    advertising_date: '2020-01-09',
                    amount: 5,
                },
                {
                    advertising_date: '2020-10-09',
                    amount: 2,
                },
            ], [],
                [
                    {
                        advertising_date: '2020-08-09',
                        amount: 5,
                    },
                    {
                        advertising_date: '2020-10-09',
                        amount: 2,
                    },
                ],
            ],
            cals: [],
            days: 31,
            message: 'Hello Vue!'
        },
        created: function () {
            // `this` 指向 vm 实例
            // const diff = this.diffMonth(this.begin, this.end)
            this.tranSchedule()
        },
        computed: {},
        methods: {
            begin: function (index) {
                return ((this.schedules.length && this.schedules[index].length > 0) || (this.schedules.length > 0 && this.schedules[index].length > 0)) ? this.schedules[index][0].advertising_date : moment().format("YYYY-MM-DD")
            },
            end: function (index) {
                return ((this.schedules.length && this.schedules[index].length > 0) || (this.schedules.length > 0 && this.schedules[index].length > 0)) ? this.schedules[index][this.schedules[index].length - 1].advertising_date : moment().format("YYYY-MM-DD")
            },
            diffMonth: function (index) {
                // `this` 指向 vm 实例
                return (moment(this.end(index)).year() * 12 + moment(this.end(index)).month()) - (moment(this.begin(index)).year() * 12 + moment(this.begin(index)).month()) + 1
            },
            tranSchedule: function () {
                this.cals = []
                that = this
                this.schedules.forEach(function (schedule, index) {
                    that.cals[index] = []
                    schedule.forEach(function (item) {
                        that.cals[index][item.advertising_date] = item.amount
                    })
                })
            },
            getYearMonth: function (date, i) {
                return moment(date).add(i, 'months').format('YYYY-MM')
            },
            addMonthDay: function (date, i, j) {
                return moment(this.getYearMonth(date, i) + '-' + j).format('YYYY-MM-DD')
            },
            isValidDate: function (date) {
                return !moment(date).isValid()
            },
        }
    })
</script>
</body>
</html>

